<template>
  <div class="wrapper">
    <h2 @click="changeTestTitle">{{testTitle + '未完成'}}</h2>
    <ul class="container">
      <li v-for="(item) in todoWorkingList" :key="item.id">
        <input type="checkbox" :checked="item.checked" @click="toogleChecked(item.id)">
        <p>{{item.content}}</p>
        <p @click="deleteItem(item.id)">X</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { testState } from '../../TodoList'
import { todoState } from '../../reactiveState/todoState'
import { reactive, toRefs } from 'vue'
export default {
  setup() {
    return {
      ...toRefs(testState),
      ...toRefs(todoState),
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.container {
  display: flex;
  flex-direction: column;
}
li {
  height: 40px;
  width: 300px;
  background-color: azure;
  margin-bottom: 10px;
  display: flex;
  border-radius: 14px;
  align-items: center;
  color: black;
  margin-left: 10px;
  justify-content: space-between;
}
</style>